<template>
  <div style="background-color: white">
    <div class="probox">
      <el-button size="mini" @click="dialogVisible = true">创建用户</el-button>
    </div>

    <el-divider></el-divider>
    <div style="padding: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="create_time" label="注册时间" width="180">
        </el-table-column>
        <el-table-column prop="name" label="权限角色" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <el-row slot-scope="scope">
            <el-button
              size="mini"
              round
              @click="
                changeVisible = true;
                form1._id = scope.row._id;
              "
              >修改</el-button
            >
            <el-button size="mini" round @click="delUser(scope.row)"
              >删除</el-button
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px; text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加用户 -->
    <div>
      <el-dialog title="添加用户" :visible.sync="dialogVisible">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>

          <el-form-item label="角色" prop="role_id">
            <el-select v-model="form.role_id" placeholder="请选择角色">
              <!-- <el-option label="管理员" value="0"></el-option>
              <el-option label="VIP" value="1"></el-option> -->
              <el-option
                v-for="it in rolesList"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>

          <el-button
            type="primary"
            @click="
              dialogVisible = false;
              addUser(form);
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 修改用户 -->

    <div>
      <el-dialog title="修改用户" :visible.sync="changeVisible">
        <el-form ref="form1" :rules="rule" :model="form1" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form1.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form1.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form1.email"></el-input>
          </el-form-item>

          <el-form-item label="角色" prop="role_id">
            <el-select v-model="form1.role_id" placeholder="请选择角色">
              <el-option
                v-for="it in rolesList"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="changeVisible = false">取 消</el-button>

          <el-button
            type="primary"
            @click="
              changeVisible = false;
              updateUser(form1);
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["addUsers", "getUsers", "delUsers", "updateUsers"]),
    addUser(form) {
      this.addUsers({ ...form });
    },
    updateUser(form1) {
      console.log(form1, 666);
      this.updateUsers(form1);
    },
    changePage(pageNum) {
      console.log(pageNum, this.pageSize);
      var pageSize = this.pageSize;
      this.getUsers({ pageNum, pageSize });
    },
    delUser(row) {
      var userId = row._id;
      console.log(8888, row, userId);
      this.delUsers(userId);
    },
  },
  data() {
    return {
      changeVisible: false,
      dialogVisible: false,
      form: {
        username: "",
        password: "",
        phone: "",
        email: "",
        role_id: "",
      },
      form1: {
        _id: "",
        username: "",
        phone: "",
        email: "",
        role_id: "",
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 6, message: "长度在 4 到 6 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        role_id: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      rule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        role_id: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
    };
  },
  computed: {
    rolesList() {
      return this.$store.state.user.users.roles;
    },
    tableData() {
      var Data = this.$store.state.user.users.list;

      if (Data) {
        let roles = this.$store.state.user.users.roles;
        Data.forEach((item) => {
          item.create_time = this.$formatDate(item.create_time);
          //获取权限角色
          let role = roles.filter((i) => {
            return i._id == item.role_id;
          });
          if (role.length!=0) {
            item.name = role[0].name;
          } else {
            item.name = "";
          }
        });
      }
      return Data;
    },

    total() {
      return this.$store.state.user.users.total;
    },
    pageNum() {
      return Number(this.$store.state.user.users.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.user.users.pageSize);
    },
  },
};
</script>
